<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../components/cr-issue-inbox.html">

<polymer-element name="cr-user-view" attributes="username">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <style>
            :host { display: block; }

            p {
                padding: 1em;
                font-size: 2em;
            }
        </style>
        <template if="{{ loading && !failed }}">
            <p>
                Loading issues for {{ username }}...
            </p>
        </template>
        <template if="{{ failed }}">
            <p>
                Failed to load issues. :(
            </p>
        </template>
        <template if="{{ !loading && !failed }}">
            <h1 class="app-header">Issues for {{ username }}</h1>
            <cr-issue-inbox issues="{{ issues }}"></cr-issue-inbox>
        </template>
    </template>
    <script>
        Polymer({
            created: function() {
                this.username = "";
                this.issues = null;
                this.failed = false;
                this.loading = false;
            },
            attached: function() {
                var self = this;
                this.fire("title-change", {
                    value: "Issues for " + this.username,
                });
                var user = new User(this.username);
                this.issues = new IssueList(user);
                this.failed = false;
                this.loading = true;
                this.issues.loadIssues().catch(function(error) {
                    console.log(error);
                    self.failed = true;
                }).either(function() {
                    self.loading = false;
                });
            },
        });
    </script>
</polymer-element>
